<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Fizzbuzz</title>
    <style>
        #num-inicial,
        #num-final,
        #fizz,
        #buzz {
            margin: 5px;
        }

        #boton-mostrar {
            border-radius: 10px;
            width: 120px;
            border-width: 1px;
        }

        #boton-mostrar:hover {
            background-color: rgb(194, 179, 207);
        }
    </style>
</head>

<body>
    <h1>FizzBuzz</h1>
    <hr />
    <p>
        <strong>Rango de números: </strong><input type="text" id="num-inicial" placeholder="1" /><input type="text"
            id="num-final" placeholder="100" />
        <br /><strong>Fizz - Múltiplos de: </strong></strong><input type="text" id="fizz" placeholder="3" />
        <br /><strong>Buzz - Múltiplos de: </strong></strong><input type="text" id="buzz" placeholder="5" />
        <br /><input type="button" value="Mostrar" id="boton-mostrar" />
    </p>
    <p id="resultado"></p>

    <script>
        let ni = document.getElementById("num-inicial");
        let nf = document.getElementById("num-final");
        let multiplo1 = document.getElementById("fizz");
        let multiplo2 = document.getElementById("buzz");
        let boton = document.getElementById("boton-mostrar");
        boton.addEventListener("click", mostrarFizzBuzz);
        let resultado = document.getElementById("resultado");

        function mostrarFizzBuzz() {
            let m1 = parseInt(multiplo1.value);
            let m2 = parseInt(multiplo2.value);

            resultado.innerHTML = " ";
            resultado.innerHTML += "<hr />";

            for (let i = parseInt(ni.value); i <= parseInt(nf.value); i++) {
                if (esDivisible(i, m1)) {
                    resultado.innerHTML += "Fizz";
                }
                if (esDivisible(i, m2)) {
                    resultado.innerHTML += "Buzz";
                }

                if (!esDivisible(i, m1) && !esDivisible(i, m2)) {
                    resultado.innerHTML += i;
                }
                resultado.innerHTML += "<br />";
            }
        }

        function esDivisible(num, divisor) {
            if (num % divisor == 0) {
                return true;
            }
            else {
                return false;
            }
        }
    </script>
</body>